<template>
  <div>
    <div class="project-page">
      <!-- 顶部信息 -->
      <div class="header">
        <el-card shadow="always">
          <div class="header-content">
            <div>
              招标项目编号：<span>{{this.form.projectNumber}}</span>
            </div>
            <div style="margin-left: 20px">
              招标项目名称：
              <el-link type="primary" @click="handleLook()">{{this.form.projectName}}</el-link>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 流程步骤 -->
      <div class="steps">
        <el-steps :active="activeStep" align-center finish-status="success">
          <el-step title="公告" description="采购公告"></el-step>
          <el-step title="报名响应">
            <template #description>
              <div>报名单位名单</div>
              <div>签到表</div>
            </template>
          </el-step>
          <el-step title="开标" description="会议室预约"></el-step>
          <el-step title="评标" description="中标结果公示"></el-step>
          <el-step title="定标">
            <template #description>
              <div>中标通知</div>
              <div>成交通知书</div>
            </template>
          </el-step>
          <el-step title="合同" description="合同管理"></el-step>
          <el-step title="履约"></el-step>
        </el-steps>
      </div>

      <!-- 附加功能 -->
      <div class="additional-features">
        <el-card shadow="never">
          附加功能：
          <el-button type="primary" @click="handleClarification">澄清公告</el-button>
          <el-button type="success" @click="handleArchive">归档</el-button>
        </el-card>
      </div>
      <el-dialog title="查看采购项目"
                 :visible.sync="dialogViewVisible"
                 :custom-class="'slide-right-dialog'"
      >
        <el-form :model="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="项目编号">
            <el-input v-model="form.projectNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.projectName" readonly></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-select v-model="form.quantity" disabled>
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目预算(万元)">
            <el-input v-model="form.budget" readonly></el-input>
          </el-form-item>
          <el-form-item label="项目类型">
            <el-radio-group v-model="form.projectType" disabled>
              <el-radio-button :label="'工程'" :value="'工程'">工程</el-radio-button>
              <el-radio-button :label="'耗材'" :value="'耗材'">耗材</el-radio-button>
              <el-radio-button :label="'设备'" :value="'设备'">设备</el-radio-button>
              <el-radio-button :label="'维护'" :value="'维护'">维护</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="采购方式">
            <el-radio-group v-model="form.procurementMethod" disabled>
              <el-radio-button :label="'磋商'" :value="'磋商'">磋商</el-radio-button>
              <el-radio-button :label="'委托'" :value="'委托'">委托</el-radio-button>
              <el-radio-button :label="'竞价'" :value="'竞价'">竞价</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="采购类型">
            <el-radio-group v-model="form.procurementType" disabled>
              <el-radio-button :label="'公开采购'" :value="'公开采购'">公开采购</el-radio-button>
              <el-radio-button :label="'单一来源'" :value="'单一来源'">单一来源</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="资金来源">
            <el-select v-model="form.fundingSource" disabled>
              <el-input label="预算" value="预算"></el-input>
              <el-input label="拨款" value="拨款"></el-input>
              <el-input label="其他" value="其他"></el-input>
            </el-select>
          </el-form-item>
          <el-form-item label="招标负责人" prop="tenderOfficer">
            <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange" readonly>
              <el-option
                  v-for="item in tenderOfficerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="name">
            <el-select v-model="form.tenderOfficer" placeholder="请选择" @change="onTenderOfficerChange" readonly>
              <el-option
                  v-for="item in tenderOfficerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系科室" prop="department">
            <el-input v-model="form.department" readonly></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-select v-model="form.applicant" placeholder="请选择" @change="onApplicantChange">
              <el-option
                  v-for="item in applicantOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请科室">
            <el-input v-model="form.applyingDepartment" readonly></el-input>
          </el-form-item>
          <el-form-item label="采购内容">
            <el-input type="textarea" v-model="form.procurementText" readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogViewVisible = false">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="dialogClarifyVisible"
               style="text-align: center;"
    >
      <div class="dialog-title">{{this.pubName}}</div>
      <el-card style="height: 300px">
        <el-table :data="clarifyData" height="500">
          <el-table-column label="企业名称" prop="departmentName"></el-table-column>
          <el-table-column :prop="'clarifyFileUrl'"
                           :label="'澄清文件'" >
            <template #default="{ row }">
              <a :href="row.clarifyFileUrl" target="_blank">澄清文件下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>

import {getUserByName} from "@/api/user";
import {addProject} from "@/api/project";
import {getClarifyByProjectNumber} from "@/api/publicity";

export default {
  data() {
    return {
      row: '',
      pubName: '',
      activeStep: 0, //当前步骤
      projectId:0,
      form:{},
      ArchiveForm: {},
      clarifyData: [],
      dialogViewVisible: false,
      dialogClarifyVisible: false,
      tenderOfficerOptions: [],
      applicantOptions: [],
    };
  },
  mounted() {
  // 接收传递过来的参数
  this.row = this.$route.query.row;
  this.init();
  this.activeStep = this.row.annoStatus;
  },
  methods: {
    init() {
        this.form = this.row;
    },
    async handleLook() { // 查看
      this.form = this.row;
      await getUserByName(this.row.tenderOfficer).then(res => {
        this.form.phoneNumber = res.phoneNumber
        this.form.department = res.department
      })
      this.dialogViewVisible = true
    },
    handleArchive() { // 项目归档
      this.$confirm('确定将（' + this.row.projectName +'）项目归档吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.ArchiveForm.projectNumber = this.row.projectNumber
        this.ArchiveForm.status = 6
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');  // 保证两位数
        const day = String(currentDate.getDate()).padStart(2, '0');  // 保证两位数
        this.ArchiveForm.archiveTime = `${year}-${month}-${day}`
        addProject(this.ArchiveForm).then(res => {
          if (res) {
            this.$message({
            type: 'success',
            message: '归档成功!'
            });
          }
        })
      }).catch(() => {
        this.$message('已取消归档')
      })
    },
    handleClarification() { // 项目澄清公告
        getClarifyByProjectNumber(this.row.projectNumber).then(res => {
          if(res.length !== 0) {
            this.clarifyData = res
            this.pubName = this.clarifyData[0].publicityName
            this.dialogClarifyVisible = true
          }else {
            this.$message({
              type: 'warning',
              message: '该项目无澄清公告'
            })
          }
        })
    },
  }
};
</script>

<style scoped>
.project-page {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
.header-content {
  display: flex;
  justify-content: left;
  align-items: center;
}
.steps {
  margin: 20px 0;
  margin-top: 50px;
}
.additional-features {
  margin-top: 50px;
  text-align: left;
}
>>> .slide-right-dialog {
  top: -115px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 1000px;
  width: 600px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 14px; /* 调整对话框正文内容的字体大小 */
}
@keyframes slide-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>
